<template>
  <div class="newList">
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">新增反馈</span>
      <span class="header-wrap-right"></span>
    </div>
    <div class="uploader">
      <van-uploader v-model="list" :max-count="8"/>
    </div>
    <div class="newList-list">
      <span class="list-title">反馈主题</span>
      <div class="list-content">
          <van-field clearable v-model="list_title" placeholder="请填写反馈标题" />
      </div>
    </div>
    <div class="newList-list">
      <span class="list-title">反馈位置</span>
      <div class="list-content">
          <van-field disabled clearable v-model="message.default_name"/>
      </div>
    </div>
    <div class="newList-textarea">
      <div class="list-content" style="border:none;">
         <van-field
          clearable
          class="minHeight"
          v-model="list_content"
          type="textarea"
          placeholder="请输入详细反馈内容"
          rows="6"
          autosize
        />
      </div>
    </div>      
    <div class="sunmit-box">
      <div class="submit" @click="addlist">
        确定
      </div>
    </div>
  </div>
</template>
<script>
import { Uploader,Field } from 'vant';
import api from '../../../api/api.js'
import { setTimeout } from 'timers';
export default {
	props:{
		message:{
			type: Object
		}
  },
  data(){
    return{
      list:[],
      fileList: [],
      avatar:[],
      list_title: '',
      list_content:'',
    }
  },
  methods:{
    goback(){
      this.$emit('getshow')
    },
    add(){
      this.$emit('addlist')
    },
    //上传
    upload(){
    this.$post(api.upload, {
      base64:this.avatar
    })
    .then((response) => {
      if(response.data.code==1){
        this.fileList = response.data.data.urls
        // 提交时候后台需要的参数
         this.$post(api.newadd, {
          image:this.fileList,
          title: this.list_title,
          content: this.list_content,
        }) 
        .then((response) => {
          if(response.data.code==0){
            this.$toast(response.data.msg)
            return
          }
          if(response.data.code==1){
            this.list = [],
            this.list_title = '',
            this.list_content = ''
            this.$toast('新增反馈成功')
            setTimeout(() => {
              this.goback()
            }, 1500);
          }
        })
        .catch((error) => {
          console.log(error);
        });
      }
    })
    },
    // 提交
    addlist(){
      if(this.list==0){
        this.$toast('请上传反馈照片')
        return
      }
      if(this.list_title.length<3){
        this.$toast('反馈标题不能小于三位数')
        return
      }
      if(!this.list_content){
        this.$toast('请输入详细反馈内容')
        return
      }
      this.list.map((element, index) => {
  // 创建Canvas对象(画布)
        let canvas =  document.createElement('canvas')  
        // 获取对应的CanvasRenderingContext2D对象(画笔)
        let context = canvas.getContext('2d') 
        // 创建新的图片对象 
        let img = new Image()
        // 指定图片的DataURL(图片的base64编码数据)
        img.src = element.content
        // 监听浏览器加载图片完成，然后进行进行绘制
        img.onload = () => {
          // 指定canvas画布大小，该大小为最后生成图片的大小
          canvas.width = 450
          canvas.height = 350
          /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
          如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/ 
          context.drawImage(img, 0, 0, 450, 350)
          // 将绘制完成的图片重新转化为base64编码，element.file.type为图片类型，0.92为默认压缩质量
          element.content = canvas.toDataURL(element.file.type,0.92) 
          // 最后将base64编码的图片保存到数组中，留待上传。
          this.avatar.push(element.content)
          this.upload()
        }
      })
    },
  },
  components: {
    [Uploader.name]:Uploader,
    [Field.name]:Field,
  }
}
</script>
<style>
.van-cell-group{
  background: none;
}
.van-uploader__upload{
  width: 1.2rem;
  height: 1.2rem;
  background-color: #fff;
  border-radius: 0.12rem;
  border: 1px solid #57c5c6;
}
.van-uploader__preview-image{
  width: 1.2rem;
  height: 1.2rem;
}
.van-uploader__preview,.van-uploader__upload{
  margin: 0 .2rem .2rem .2rem;
}
.van-uploader__upload-icon{
  color: #000;
  font-size: .6rem;
}
.van-icon-delete:before{
  content: "\F041";
}

</style>
<style scoped>
.newList{
  padding-bottom: 2.5rem;
}
.uploader{
  margin: 1.5rem .5rem .25rem .5rem;
}
.list-content{
  margin:.15rem .5rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: .45rem;
}
.newList .newList-list{
  margin-bottom: .3rem;
}
.newList .newList-list .van-cell{
  background: none;
  padding: .26rem .3rem;
}
.newList .newList-textarea .van-cell{
  background: #fff;
  padding: .15rem .15rem;
  border: 1px solid #ddd;
  border-radius: .2rem;
  font-weight: bold;
}
.list-title{
  display: block;
  margin:0rem .8rem;
  color: #57c5c6;
  font-weight: bold;
}
.minHeight{
  min-height: 3rem;
  padding: .15rem; 
}
.sunmit-box{
  z-index: 888;
  position: fixed;
  bottom: 0rem;
  left: 0;
  width: 100%;
  height: 2rem;
  background: #fff;
}
.submit{
  margin: .5rem auto 0;
  color: #fff;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  font-weight: bold;
  width: 88%;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .45rem;
  text-align: center;
  font-weight: bold;
}
</style>


